<template>
    <div class="gray">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
            >
            <ul>
                <li v-for="item in imgList" :key="item.id" @click="topicRoute(item)">
                    <img :src="item.scene_pic_url" width="100%" height="207">
                    <p>{{item.title}}</p>
                    <p>{{item.subtitle}}</p>
                    <p>{{item.price_info}}元起</p>
                </li>
            </ul>
        </van-list>
        <height></height>
    </div>
</template>

<script>
import height from "@/components/height.vue"
import { listaction } from "@/api/topic/index.js"
export default {
    data() {
        return {
            imgList:[],
            loading: false,
            finished: false,
            num:1,
            total:0
        };
    },
    methods: {
        onLoad() {
            if(this.num > this.total){
                this.finished = true;
            }else{
                this.init();
                
            }
        },
        init(){
            listaction({
                page:this.num
            }).then(res => {
                console.log(res);
                this.imgList.push(...res.data.data)
                this.total = res.data.total
                this.num++;
                this.loading = false;
            })
        },
        topicRoute(val){
            this.$router.push({path:"/home/topic",query:{id:val.id}})
        }
    },
    created() {
        this.init();
    },
    computed: {

    },
    components:{
        height
    }
};
</script>

<style scoped lang="scss">
    .gray{
        background-color: rgb(244,244,244);
    }
    li{
        background-color: #fff;
        padding-bottom: 10px;
        margin-bottom:10px ;
        p:nth-child(2){
            color: #333;
            font-size: .46667rem;
            margin-top: .4rem;
        }
        p:nth-child(3){
            color: #999;
            font-size: .32rem;
            margin-top: .21333rem;
            padding: 0 .26667rem;
        }
        p:last-child{
            color: #b4282d;
            font-size: .36rem;
            margin-top: .26667rem;
        }
    }
</style>
